<template>
  <div>
    <el-form-item v-if="formItem.deliveryType === 'express'" label="快递公司：" prop="expressCode">
      <el-select v-model="formItem.expressCode" filterable :style="isShowBtn ? 'width: 83%' : 'width:100%'">
        <el-option v-for="(item, i) in express" :value="item.code" :key="i" :label="item.name"></el-option>
      </el-select>
      <el-button
        v-show="isShowBtn"
        class="ml24"
        type="primary"
        size="small"
        @click="handleCreat"
        v-hasPermi="['merchant:express:relate']"
        >设置物流公司</el-button
      >
    </el-form-item>
    <el-form-item v-if="formItem.deliveryType === 'express'" label="快递单号：" prop="expressNumber">
      <el-input v-model.trim="formItem.expressNumber" placeholder="请输入快递单号"></el-input>
    </el-form-item>
    <el-form-item v-if="formItem.deliveryType === 'noNeed'" label="发货备注：">
      <el-input
        v-model.trim="formItem.deliveryMark"
        show-word-limit
        :autosize="{ minRows: 4 }"
        maxlength="250"
        type="textarea"
        placeholder="请输入备注信息，最多可输入250字"
      ></el-input>
    </el-form-item>
    <el-form-item v-if="formItem.deliveryType === 'merchant'" label="配送人员：" prop="deliveryCarrier">
      <div class="acea-row">
        <el-select
          v-model="selectedValue"
          value-key="id"
          :style="isShowBtn ? 'width: 85%' : 'width:100%'"
          filterable
          clearable
          @change="handleChangePersonnel"
        >
          <el-option v-for="item in personnelList" :key="item.id" :label="item.personnelName" :value="item" />
        </el-select>
        <el-button v-show="isShowBtn" class="ml24" @click="handleCreatPersonnel()">添加配送员</el-button>
      </div>
    </el-form-item>
    <el-form-item v-if="formItem.deliveryType === 'merchant'" label="手机号码：" prop="carrierPhone">
      <el-input v-model.trim="formItem.carrierPhone" disabled placeholder="请输入配送人员手机号码"></el-input>
    </el-form-item>
    <!--物流公司-->
    <creat-express ref="craetExpressRef" @handlerSuccessSubmit="getList"></creat-express>
    <!-- 添加配送员 -->
    <creat-personnel
      :dialogVisible="dialogVisible"
      :editData="editData"
      @handlerCloseFrom="handlerCloseFrom"
      @handlerSuccessSubmit="handlerSuccessSubmit"
    ></creat-personnel>
  </div>
</template>

<script>
import CreatExpress from '@/views/systemSetting/logisticsManagement/creatExpress.vue';
import { useLogistics } from '@/hooks/use-order';
import { defaultData } from '@/views/systemSetting/deliveryPersonnel/default';
import { personnelListApi } from '@/api/deliveryPersonnel';
import CreatPersonnel from '@/views/systemSetting/deliveryPersonnel/creatPersonnel';
export default {
  name: 'sendFrom',
  components: { CreatExpress, CreatPersonnel },
  data() {
    return {
      selectedValue: null,
      express: [],
      dialogVisible: false,
      editData: Object.assign({}, defaultData),
      tableFrom: {
        page: 1,
        limit: 9999,
      },
      personnelList: [],
    };
  },
  props: {
    formItem: {
      type: Object,
      default: null,
    },
    isShowBtn: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.getList();
    this.getPersonnelList();
  },
  methods: {
    //选择配送员
    handleChangePersonnel(e) {
      this.formItem.deliveryCarrier = e.personnelName;
      this.formItem.carrierPhone = e.personnelPhone;
    },
    // 取消选配送员弹窗
    handlerCloseFrom() {
      this.dialogVisible = false;
    },
    // 选配送员确定回调
    handlerSuccessSubmit() {
      this.getPersonnelList();
      this.dialogVisible = false;
    },
    // 配送员列表
    async getPersonnelList() {
      const data = await personnelListApi(this.tableFrom);
      this.personnelList = data.list;
      if (!this.isShowBtn)
        this.selectedValue = this.personnelList.filter((item) => item.personnelPhone === this.formItem.carrierPhone)[0];
    },
    // 添加
    handleCreatPersonnel(row) {
      this.editData = row ? row : Object.assign({}, defaultData);
      this.dialogVisible = true;
    },
    // 添加
    handleCreat() {
      if (!localStorage.getItem('expressAllList')) this.$refs.craetExpressRef.getExpressList();
      this.$refs.craetExpressRef.dialogVisible = true;
    },
    // 物流公司列表
    async getList() {
      const params = {
        keywords: '',
        page: 1,
        limit: 50,
        openStatus: true,
      };
      this.express = await useLogistics(params);
      this.express.map((item) => {
        if (item.isDefault && !this.formItem.id) this.formItem.expressCode = item.code;
      });
    },
  },
};
</script>

<style scoped></style>
